<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="去评论" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="gotoappraise">
			<view class="gotoappraise-content">
				<text v-if="storeId && storeName" class="gotoappraise-content-name">商店商铺名称：{{ storeName }}</text>
				<text v-if="ordersId" class="gotoappraise-content-ddh">订单编号：{{ ordersId }}</text>
				<text class="gotoappraise-content-line"></text>
				<view class="gotoappraise-content-content">
					<text class="gotoappraise-content-content-txt">评价内容：</text>
					<textarea v-model="content" class="gotoappraise-content-content-content"/>
				</view>
			</view>
			<view class="gotoappraise-btn">
				<button @click="onClickSubmit" class="gotoappraise-btn-wrap">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js'
	import { myMixin } from '@/utils/mixin.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

	export default {
		mixins: [myMixin],
		components: {
			uniNavBar
		},
		data() {
			return {
				storeName: '',
				ordersId: '',
				storeId: '',
				content: ''
			}
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			onClickSubmit() {
				if (!this.ordersId) {
					uni.showToast({
						icon: 'none',
						title: '暂无订单号'
					})
					return false
				}
				if (!this.storeId) {
					uni.showToast({
						icon: 'none',
						title: '暂无商户'
					})
					return false
				}
				if (!this.content) {
					uni.showToast({
						icon: 'none',
						title: '请填写要评价的内容'
					})
					return false
				}
				uni.showLoading({ title: '保存中' })
				uni.request({
					url: `${config.api_base_url}member/evaluate/${this.storeId}`,
					method: 'POST',
					data: {
						ordersId: this.ordersId,
						content: this.content
					},
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token'),
						'Content-Type': 'application/json'
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							uni.showToast({
								icon: 'none',
								title: '评价成功'
							})
							setTimeout(() => {
								uni.navigateBack({})
							}, 888)
						} else {
							uni.showToast({
								icon: 'none',
								title: status.msg
							})
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '无法评价, 网络异常'
						})
					}),
					complete: (() => {
						uni.hideLoading()
					})
				})
			}
		},
		onLoad(e) {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('role')
					uni.removeStorageSync('memberId')
					uni.removeStorageSync('token')
					uni.removeStorageSync('openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			if (e && e.ordersId) {
				this.ordersId = e.ordersId
			}
			if (e && e.storeId) {
				this.storeId = e.storeId
			}
			if (e && e.storeName) {
				this.storeName = e.storeName
			}
		}
	}
</script>

<style>
page {
	background-color: #F7F4F8;
}
</style>
<style scoped>
.gotoappraise {
	width: 100%;
	box-sizing: border-box;
	padding-top: 18rpx;
	padding-left: 16rpx;
	padding-right: 14rpx;
}
.gotoappraise-content {
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
	width: 100%;
	box-sizing: border-box;
	padding-top: 36rpx;
	padding-left: 34rpx;
	padding-right: 20rpx;
	padding-bottom: 28rpx;
	display: flex;
	flex-direction: column;
}
.gotoappraise-content-name {
	font-size: 28rpx;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.85);
	line-height: 40rpx;
}
.gotoappraise-content-ddh {
	font-size: 28rpx;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	line-height: 40rpx;
}
.gotoappraise-content-line {
	width: 100%;
	height: 2rpx;
	background-color: #eee;
	margin-top: 30rpx;
}
.gotoappraise-content-content {
	width: 100%;
	margin-top: 4rpx;
	display: flex;
	box-sizing: border-box;
	padding-left: 18rpx;
	padding-right: 24rpx;
	flex-direction: column;
}
.gotoappraise-content-content-txt {
	font-size: 28rpx;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	line-height: 40rpx;
}
.gotoappraise-content-content-content {
	margin-top: 8rpx;
	width: 100%;
	min-height: 230rpx;
	background-color: #F8F8F8;
	border-radius: 12rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	padding: 20rpx;
}
.gotoappraise-btn {
	margin-top: 18rpx;
	width: 100%;
	height: 82rpx;
	box-sizing: border-box;
	padding-left: 120rpx;
	padding-right: 120rpx;
}
.gotoappraise-btn-wrap {
	width: 100%;
	height: 100%;
	border-radius: 14rpx;
	background-color: #F02230;
	color: #fff;
	font-size: 32rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
